<template>
  <div>
    <h1>News</h1>
   <button @click="toDetail('娱乐')">娱乐新闻</button>
   <button @click="toDetail('体育')">体育新闻</button>
   <button @click="toDetail('军事')">军事新闻</button>
   <button @click="toDetail('政治')">政治新闻</button>
   <button @click="toDetail('花边')">花边新闻</button>
    
   <router-view></router-view>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "News",
});
</script>

<script setup lang="ts">
import { useRouter } from "vue-router";
/*
  useRouter
    返回router 实例 相当于在模板中使用 $router.必须在setup()中调用 
 */
const router = useRouter();
const toDetail =(type:string)=>{
  router.push({
    name:"Detail",
    params:{
      type
    }
  });
}

</script>

<style scoped lang="scss"></style>
